<template>
	<view class="content">
		<view class="tab_one">
			<view class="tab_one_text" :style="{'height':fullHeight/2+ 'px'}" :class="{'active':isActive1==item.type}"
				v-for="(item,index) in leixingarr" @click="checked(item)">{{item.name}}</view>
		</view>
		<view class="tab_two" :style="{'height':fullHeight+ 'px'}">
			<view class="tab_two_text" :class="{'active':isActive2==item.id}"
				v-for="(item,index) in leixingarr[isActive1-1].content" @click="checked2(item)">
				{{item.title}}
			</view>
		</view>
		<view class="tab_three" :style="{'height':fullHeight+ 'px'}">
			<view class="tab_three_text" v-for="(item,index) in leixingarr[isActive1-1].content"
				v-if="item.id==isActive2">
				<view class="jieshaoimg">
					<image :src="item.jieshaoimg" mode=""></image>
				</view>
				<view class="jieshao">
					<rich-text :nodes="item.jieshao"></rich-text>
				</view>
				<view class="tixingimg">
					<image src="../../static/tixing.png" mode="widthFix"></image>
				</view>
				<view class="tixing">
					<rich-text :nodes="item.tixing"></rich-text>
				</view>


			</view>
		</view>
	</view>


</template>

<script>
	export default {
		data() {
			return {
				fullwidth: '',
				fullHeight: '',
				isActive1: "1",
				isActive2: "1",
				leixingarr: []
			}
		},
		onLoad() {
			this.animation = uni.createAnimation({
				timingFunction: 'ease',
				delay: 0
			});
			// var that = this
			// var data = require("static/data/leixing.json")
			// that.leixingarr = data["leixingarr"]
			this.leixingarr= require("static/data/leixing.json")["leixingarr"]
			console.log(this.leixingarr);
			console.log("123");
		},
		mounted() {
			this.getFullData();
		},
		methods: {

			getFullData() {
				var that = this
				uni.getSystemInfo({
					success: function(res) {
						//获取屏幕的高度
						that.fullHeight = res.windowHeight;
						//获取屏幕的宽度
						that.fullwidth = res.windowWidth;
					}
				})
			},
			checked(item) {
				this.isActive1 = item.type;
				console.log(item)
				console.log("isAct=" + this.isActive1)
				this.isActive2 = 1;
			},
			checked2(item) {
				this.isActive2 = item.id;
				console.log(item)
			}



		},


	}
</script>

<style>
	page {
		background-image: url(../../static/bg.png);
	}

	.content {
		/* border: #007AFF solid 1px; */
		width: 95%;
		margin: 0 auto;
		display: flex;
		flex-direction: row;
	}

	.tab_one {
		/* border: #000000 solid 1px; */
		width: 80rpx;
		background-color: rgba(255, 255, 255, 0.2);

	}

	.tab_one_text {
		height: ;
		/* border: #000000 solid 1px; */
		writing-mode: vertical-lr;
		text-align: center;
		width: 80rpx;
		line-height: 80rpx;
		font-size: 48rpx;

	}

	.active {
		background-color: #007AFF;
	}

	.tab_two {
		/* border: #000000 solid 1px; */
		width: 160rpx;

		overflow-x: hidden;
		box-sizing: border-box;
		padding: 0rpx 10rpx;
		background-color: rgba(255, 255, 255, 0.4);

	}

	.tab_two_text {
		border: #000000 solid 1px;
		width: 100%;
		font-size: 36rpx;
		border-radius: 20rpx;
		padding: 10rpx;
		box-sizing: border-box;
		text-align: center;
		margin-bottom: 10rpx;

	}

	.tab_three {
	
		border-radius:20rpx ;
		width: 477rpx;
		background-color: rgba(255,255,255,0.6);
		overflow-x: hidden;
		/* box-sizing: border-box; */
	}

	.tab_three_text {
		
		/* box-sizing: border-box; */
	}

	.jieshaoimg {
		/* border: #000000 solid 1px; */
		width: 100%;
		height: 300rpx;
		border-radius: 20rpx;
		margin-bottom: 10rpx;
	}

	.jieshaoimg image {
		border-radius: 20rpx;
		width: 100%;
		height: 100%;
	}

	.jieshao {
		/* border: #000000 solid 1px; */
		background-color: #F7F7F7;
		border-radius:20rpx ;
		margin: 10rpx auto;
		box-sizing: border-box;
		width: 95%;

		display: block;
		text-indent: 2em;
	}
	.tixingimg {
		width: 200rpx;
		margin: 0rpx auto;
	}
	.tixingimg image{
		width: 100%;
	}
	.tixing{
	
			/* border: #000000 solid 1px; */
			background-color: #F7F7F7;
			border-radius:20rpx ;
			margin: 10rpx auto;
			box-sizing: border-box;
			width: 95%;
			display: block;
			text-indent: 2em;
			color: #ea0003;
	
	}

</style>
